<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        img {
            width: 300px;
            height: 300px;

        }
    </style>
</head>

<body>
    <div id="app">
        <img :src="imgSrc" alt="">
        <button @click="shang">上一张</button>
        <button @click="next">下一张</button>

    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    imgList: ['https://img20.360buyimg.com/babel/s590x470_jfs/t1/121333/28/19824/76336/614a07e5E52f15e15/02dc0f25eed3525f.jpg.webp', 'https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/27120154742/FocusFullshop/CkRqZnMvdDEvMTU3NzA0LzE5LzI0MDg3LzM0NDc4Ni82MTQxYmY5ZEVhMjhkMTI5Ny8wZWRhNjNlMTFjOWI1OTRjLnBuZxIJMy10eV8wXzU0MAI47ot6QhMKD-WFi-W-leW4nemSu-aIkhAAQhYKEueyvuW9qeS4jeWuuemUmei_hxABQhAKDOeri-WNs-aKoui0rRACQgoKBuenjeiNiRAHWPbw8oNl/cr/s/q.jpg', 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/210851/15/1099/80771/614587bbEc82b7dc3/6ef11e63007a41be.png.webp'],
                    imgIndex: 0

                }

            },
            computed: {
                imgSrc() {
                    return this.imgList[this.imgIndex]
                }

            },
            methods: {
                next() {
                    this.imgIndex++
                    if (this.imgIndex >= this.imgList.length) {
                        this.imgIndex = 0
                    }
                },
                shang() {
                    this.imgIndex--
                    if (this.imgIndex <0) {
                        this.imgIndex = 2
                    }
                }
            }
            
               
            


        })

        // 今晚作业：
        // 用Vue动态生成表格，字段包括
        // id（不能重复，自动生成）
        // name
        // 班级（选择的方式录入，录入的值要求是数字）
        // 操作（删除，编辑，是否毕业[如果毕业了，把名称使用中划线显示]）
        // 新增功能
    </script>



</body>

</html>